<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<link rel="import" href="yt-video.html">
<link rel="import" href="yt-search.html">

<polymer-element name="yt-search-video" attributes="ImFeelingLucky muted index maxResults">
<template>
  <style>
    :host {
      background: url(../yt-video/assets/logo.png) no-repeat center;
      display: block;
      position: relative;
    }
    
    yt-video {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
  <yt-search id="search" maxResults="{{maxResults}}" list="{{list}}"></yt-search>
  <yt-video id="video" videoEntry="{{video}}" muted="{{muted}}"></yt-video>
</template>
<script>

Polymer('yt-search-video', {

  ImFeelingLucky: '',
  muted: false,
  index: 0,
  maxResults: 50,
  list: null,

  ImFeelingLuckyChanged: function() {
    if (this.isValidQuery()) {
      this.$.search.query = this.ImFeelingLucky;
    } else {
      this.$.video.clearVideo();
    }
  },

  isValidQuery: function() {
    return this.ImFeelingLucky && typeof this.ImFeelingLucky === 'string';
  },

  listChanged: function() {
    this.indexChanged();
  },

  indexChanged: function() {
    if (this.isValidQuery()) {
      this.video = this.list && this.list[this.index];
    }
  }

});

</script>
</polymer-element>
